<template>
	<view>

		<view class="uni-margin-wrap">
			<Search  />
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="item,index in Url" :key="item.id">
					<view class="swiper-item uni-bg-red" ><img :src="'http://m.mengxuegu.com'+item.imageUrl" alt=""></view>
				</swiper-item>
			</swiper>
		</view>
		
		<fl />
		<Tuijian />
		<New />
		<Free />
		<charge />
		<view class="fan" v-show="top">
			<i class="iconfont icon-top" @click="back"></i>
		</view>
	</view>
</template>

<script>
	import charge from '../../components/charge/charge.vue'
	import Free from '../../components/free/free.vue'
	import New from '../../components/New/New.vue'
	import Tuijian from '../../components/Tuijian/Tuijian.vue'
	import fl from '../../components/fl/fl.vue'
	import Search from '../../components/Search_ipt/Search_ipt.vue'
	import {getbanner} from '../../unti/api.js'
	import {reactive,toRefs,ref} from 'vue'
	import {onPageScroll,onReachBottom} from '@dcloudio/uni-app'
	export default {
		components: {
			Search,
			fl,
			Tuijian,
			New,
			Free,
			charge
		},
		setup(props, context) {
			let top=ref(false)
			let Url=ref([])
			//这是轮播图
			let obj = reactive({
				// background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true
			})
			
		const Lbt=getbanner().then((res)=>{
			 Url.value=res.data.data
			// console.log(Url);
		})
		//监听页面滚动时间
		 onPageScroll((e)=>{
			// console.log(e);
			if(e.scrollTop>300){
				top.value=true
			}else{
				top.value=false
			}
		})
		// 返回顶部
		const back=function(){
			uni.pageScrollTo({
				scrollTop:0
			})
		}
			return {
				...toRefs(obj),
				Lbt,
				Url,
				top,
				onPageScroll,
				back
			}
		}
	}
</script>

<style>
	@import'../../static/static/icon/iconfont.css';

	.fan{
		width: 30px;
		height:30px;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 50%;
		line-height: 30px;
		text-align: center;
		position: fixed;
		right: 20px;
		bottom: 200px;
	}
	.swiper {
		margin: 20px 0;
	}

	.uni-margin-wrap {
	background:linear-gradient(to top, white 30%, blue 70%);
		padding: 2px 0;
	}

	img {
		width: 94%;
		margin-left: 3%;
		border-radius: 10px;
	}
</style>
